<template>
  <div class="stage">
    <div class="box box1">{{ 1 + 1 }} : {{ t.a }}</div>
  </div>
  <div>
    <button @click="add()">添加</button>
  </div>
</template>
<script>
import Test from './class/241120.class.js'
import { ref, markRaw } from 'vue'
export default {
  data() {
    return {
      abc: 10,
      t: markRaw(new Test())
    }
  },
  methods: {
    add() {
      this.t.add()
    }
  }
}
</script>
<style type="text/css">
.stage {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box1 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  animation: rotateMove 200s linear infinite;
}
@keyframes rotateMove {
  0% {
    transform: rotate(0deg) translatex(150px) rotate(0);
  }
  100% {
    transform: rotate(360deg) translatex(150px) rotate(360deg);
  }
}
</style>
